<template>
    <header class="header-container">
        <div class="left">
            <el-input v-model="search" placeholder="Please Input" :suffix-icon="Search" />
        </div>
        <div class="right">
            <el-tooltip class="box-item" effect="dark" content="帮助" placement="top">
                <el-icon>
                    <InfoFilled />
                </el-icon>
            </el-tooltip>

            <el-dropdown>
                <div>
                    <el-icon>
                        <Avatar />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{user? user : "undefined"}}</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </header>
</template>

<script lang="ts" setup>
import { Avatar, InfoFilled, ArrowDown, Message, Search } from "@element-plus/icons-vue"
import { ElNotification } from "element-plus";
import { ref } from "vue";

import { useLogout } from "../../../hooks/useLogout";
import { useUserStore } from "../../../store/user"
const search = ref("");
const user = useUserStore().user;
const { logout } = useLogout();

</script>

<style lang="less" scoped>
.left {
    margin-left: 2rem;
}

.left /deep/ .el-input__wrapper {
    border-radius: 100px !important;
    width: 300px;
}

.header-container {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
        margin-right: 2rem;
        width: 150px;
        justify-content: space-around;

        .el-icon /deep/ {
            width: 30px;
            height: 30px;

            svg {
                transform: scale(1.5);
            }
        }

    }
}
</style>